<template>
  <div class="Time-rob-ticket">
    <div class="loading-vr" v-if="isFinishLoading">
      <img class="loading-text"
           src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/loading-txt.png" alt="">
      <img class="loading-center-figure"
           src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/loading-img.png" alt="">
      <img class="loading-background"
           src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/loading-background.jpg" alt="">
    </div>
    <div class="rob-ticket-main">
      <div id="scenario"></div>
      <div class="rob-ticket-record" v-if="isFinishCurtain">
        <marquee scrollamount="4">
          <span class="marquee-box" v-for="item in prizeList.slownessPrizesList">
            <span class="marquee-content">
              <span></span>{{item.provinceName}}用户&nbsp;&nbsp;获取10元观影券×{{item.prizeNum}}
            </span>
            <span class="marquee-nbsp"></span>
          </span>
        </marquee>
        <marquee scrollamount="5">
          <span class="marquee-box" v-for="item in prizeList.quickPrizesList">
            <span class="marquee-content">
                <span></span>{{item.provinceName}}用户&nbsp;&nbsp;获取10元观影券×{{item.prizeNum}}
            </span>
            <span class="marquee-nbsp"></span>
          </span>
        </marquee>
        <marquee scrollamount="3">
          <span class="marquee-box" v-for="item in prizeList.slowPrizesList">
            <span class="marquee-content">
                <span></span>{{item.provinceName}}用户&nbsp;&nbsp;获取10元观影券×{{item.prizeNum}}
            </span>
            <span class="marquee-nbsp"></span>
          </span>
        </marquee>
      </div>
      <div class="side-column">
        <img :class="{bomb:Unwrap}" :src="bombImg" alt="" @click="actionRecord">
        <img :class="{edit:Unwrap}"
             src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/instructions.png" alt=""
             @click="actionActivityIntroduced">
        <img :class="{process:Unwrap}"
             src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/process.png" alt=""
             @click="actionUsingProcess">
        <img :class="{record:Unwrap}"
             src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/record.png" alt=""
             @click="actionWinningRecord">
        <img class="pf-img" @click="actionUnwrap"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/pf-img.png"
             alt="">
      </div>
      <img class="friends-help"
           src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/friends-help.png" alt=""
           @click="actionClickFriendsHelp">
      <img class="use-the-help"
           src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/use-help.png" alt=""
           @click="actionClickUseTheHelp">
      <div class="winning-popup-window" v-if="isFinishWinning">
        <div class="popup-window-background"></div>
        <div class="winning-frame">
          <img class="winning-title"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/xpgy2.png" alt="">
          <div class="winning-content">
            <img class="winning-img"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/prizes-window.png"
                 alt="">
            <img class="winning-txt" v-if="isFinishTicket"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/prize-txt.png"
                 alt="">
            <div v-if="isFinishTicket == 1">
              <img
                src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/xyd.png"
                alt="">
              <img class="beans"
                   src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x500.png" alt="">
            </div>
            <div v-else-if="isFinishTicket == 2">
              <!--更改这里-->
              <img
                src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24prizes-ten.png"
                alt="">
              <img class="movie-ticket" :src="movieTicketImg" alt="">
            </div>
            <div v-else="" class="prompt-not-winning">
              <img src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/prompt-not-winning.png" alt="">
            </div>
          </div>
          <img class="winning-button"
               src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
               @click="actionAlert"
          >
        </div>
      </div>
      <div class="gameplay-is-introduced" v-if="isFinishIntroduced">
        <div class="introduce-background"></div>
        <div class="introduce-backdrop" :class="{backdropImg:!introduceChoose}">
          <img class="introduce-backdrop-img"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/activities-that-window.png"
               alt="">
          <img class="introduce-prompting-img" v-if="introduceChoose"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/activities-that.png"
               alt="">
          <img class="introduce-prompting-img" v-else=""
               src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/wfjs1.png"
               alt="">
          <img
            class="introduce-close"
            @click="actionInstructionClose"
            src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/instruction-close.png"
            alt="">
          <div class="introduce-txt">
            <p v-if="introduceChoose">
              01月26日14:00起，持卡人可抽兑《24小时:末路重生》10元观影券每人限抽1次。
              活动总限量5000张，抽兑成功后，持卡人在14天有效期内，选座购票并使用该券。
              可以10元价格购买《24小时:末路重生》电影票一张，见
              <span style="color:#ffdd22;" @click="actionUse">《使用说明》</span>
              详情见
              <span style="color:#ffdd22;" @click="actionDetails">《活动细则》</span>。
            </p>
            <div v-else="">
              <p v-for="item in gameplayIntroducedLits">{{item.title}}</p>
              <img src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24prompt-img2.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="winning-record-box" v-if="isFinishRecord">
        <div class="record-background"></div>
        <div class="record-backdrop">
          <img class="record-backdrop-img"
               src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/recordImg.png" alt="">
          <img class="record-prompting-img"
               src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/xpgy.png" alt="">
          <p class="record-prizes" v-if="!msgText && !luckyNum">
            <img class="record-no-prize"
                 src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/no-prize.png" alt="">
          </p>
          <div class="record-content-box" v-else="">
            <div class="record-content">
              <div class="record-prizes-content">
                <!--更改这里-->
                <div v-if="msgText">
                  <img
                    src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24prizes-ten.png"
                    alt="">
                  <img class="record-msg-img" :src="msgImg" alt="">
                </div>
                <div v-if="luckyNum">
                  <img
                    src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/xyd.png"
                    alt="">
                  <img class="record-title" :src="luckyImg" alt="">
                </div>
              </div>
            </div>
            <div class="content-to-view">
              <p>活动结束后24小时发放奖品</p>
            </div>
          </div>
          <img class="record-alert-button"
               src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
               @click="actionViewAlert"
          >
        </div>
      </div>
    </div>
    <div class="prompt-information-box" v-if="isFinishPrompt">
      <div class="prompt-background"></div>
      <div class="prompt-backdrop">
        <img class="prompt-backdrop-img"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/recordImg.png" alt="">
        <p class="prompt-prompting">提示</p>
        <p class="prompt-prizes">{{promptMessage}}</p>
        <img class="prompt-alert-button"
             src="https://static.idoupiao.com/pdsImg/i-pufa-film-bills/button.png" alt=""
             @click="actionPromptDetermine"
        >
      </div>
    </div>
    <div :class="theZoom?'process-layer':'process-layer-close'" v-if="isFinishProcess||theZoom">
      <!--更改这里-->
      <img class="process-that"
           src="https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24the-process-that2.jpg" alt="">
      <img class="understand"
           @click="actionProcessClose"
           src="https://static.idoupiao.com/pdsImg/i-pufa-third-active/understand.png" alt="">
    </div>
    <div class="third-activity-timing" v-if="fingType">
      <div class="third-timing-background"></div>
      <img class="third-timing-img"
           src="https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/fingxpgy.png"
           alt="">
      <div class="third-timing-time">
        <img :src="fingerBig" alt="">
      </div>
    </div>
    <div class="foot-title">
      <div></div>
      <marquee scrollamount="4">
        <span>{{footTitle}}</span>
      </marquee>
    </div>
  </div>
</template>
<script>
  import * as THREE from 'three';
//  import NetworkActivity from '@/network/NetworkActivity'
  import './js/DeviceOrientationControls.js'
//  import {mapState} from 'vuex'
  import './css/animate.css'
  import AnimateImpulse, {
    PULSE_FREQUENCY_COUNT,
    ENTER_FROM_POSITION,
    ENTER_TO_POSITION,
    ENTER_FROM_ORIENTATION,
    ENTER_TO_ORIENTATION,
    CHASE_START_ORIENTATION
  } from './js/AnimateImpulse.js'

  export default {
    name: '',
    data() {
      return {
        isFinishLoading: true,
        isFinishRecord: false,
        isFinishIntroduced: false,
        isFinishWinning: false,
        isFinishPrompt: false,
        isFinishAnimate: false,
        isFinishLoadBackground: false,
        isFinishProcess: false,
        //        弹幕图片更换
        isFinishCurtain: true,
        whetherOrNotToHelp: 0,
        activityPrizeList: [],
        cpCubeMaterials: [],
        cubeMaterialTexture: [],
        tipTheArrowList: [],
        helpRotation: [],
        helpPositionList: [],
        cpHelpMaterials: [],
//        转动大幕
        prizeList: {
          slownessPrizesList: [],
          quickPrizesList: [],
          slowPrizesList: []
        },
        introduceChoose: false,
        switchInstructions: false,
        theZoom: false,
        animationType: false,
        scenario: null,
        camera: null,
        scene: null,
        renderer: null,
        controls: null,
        INTERSECTED: null,
        INTERSECTEDHELP: null,
        raycaster: null,
        mouse: null,
        intersects: [],
        intersectsHelp: [],
        cubesUuid: [],
        helpsUuid: [],
        Unwrap: false,
        movieTicketNumber: '',
        promptMessage: '',
        fov: 75,
        position: {
          x: 0,
          y: 0
        },
        cpTexture: null,
        cpMaterial: null,
        cpGeometry: null,
        animateImpulse: null,
        isCanStartAnimate: true,
        chaseScale: 0,
        chaseOrientation: null,
        isFinishTicket: 0,
        prizeMap: [],
        robJudge: true,
        noNumber: 3,
        upvoke: 2,
        userId: '',
        helpBoxList: [],
        clickJudge: true,
        shareUrl: '',
        //        每次活动变化更改这里
        headTitle: '24小时:末路重生10元观影',
        shareCount: '我在寻找《24小时:末路重生》观影券，快来给我点线索！',
        shareTitle: '好友助力寻找道具',
        activityInstructions: '',
        activityInstructionsAction: '',
        footTitle: '点击道具开启10元观影券,点击"助力"邀请好友帮忙寻找!',
//        世玲接口需要的变量
        encryptCardNo: '',
        random: '',
        msgText: 0,
        luckyNum: 0,
        robPath: '',
        intervalid: '',
        fingerLastNum: 3,
        fingerBig: 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/hdimg-s4.png',
        fingType: false
      }
    },
    computed: {
//      ...mapState({
//        inType: state => state.login.loginIntype
//      }),
      gameplayIntroducedLits() {
        return [
          {title: '1.VR场景共藏有3个道具，每位用户最多可开启3个道具。'},
          {title: '2.开启道具有机会可获得《24小时：末路重生》10元观影券 1~3张（最多可获得一次）或幸运豆奖励。'},
          {title: '3.参与用户可分享朋友圈邀请好友助力，获得好友助力将会在VR场景中标识出道具位置。'},
          {title: '4.最多获得3个不同好友的助力。'}
        ]
      },
      luckyImg() {
        if (this.luckyNum === 500) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x500.png';
        } else if (this.luckyNum === 1000) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x1000.png';
        } else if (this.luckyNum === 1500) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x1500.png';
        } else {
          return null;
        }
      },
      msgImg() {
        if (this.msgText === 1) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x1.png';
        } else if (this.msgText === 2) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x2.png';
        } else if (this.msgText === 3) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x3.png';
        } else {
          return null;
        }
      },
      movieTicketImg() {
        if (this.movieTicketNumber === '观影券X1') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x1.png';
        } else if (this.movieTicketNumber === '观影券X2') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x2.png';
        } else if (this.movieTicketNumber === '观影券X3') {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/x3.png';
        } else {
          return null;
        }
      },
      robType: function () {
        return this.$route.query.robType;
      },
      robId: function () {
        return this.$route.query.robId;
      },
      bombImg() {
        if (this.isFinishCurtain) {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/bombFalse.png'
        } else {
          return 'https://static.idoupiao.com/pdsImg/i-pufa-third-active/bombTrue.png';
        }
      }
    },
    methods: {
      actionClickFriendsHelp() {
        this.showAlert(this.shareCount, this.shareTitle, true, this.shareUrl);
      },
      actionClickUseTheHelp() {
        this.actionStatus(4);
      },
      actionActivityIntroduced() {
        this.getCloseSideColumn();
        this.switchInstructions = '活动说明';
        this.isFinishIntroduced = true;
        this.introduceChoose = true;
      },
      actionAlert() {
        this.isFinishWinning = false;
      },
      actionUse() {
        this.isFinishIntroduced = false;
        this.getCloseSideColumn();
        this.isFinishProcess = true;
        this.theZoom = true;
      },
      actionDetails() {
        this.$router.push({name: 'thirdRuleView'})
      },
      actionRecord() {
        this.isFinishCurtain = !this.isFinishCurtain;
        this.getCloseSideColumn();
      },
      actionUsingProcess() {
        this.getCloseSideColumn();
        this.isFinishProcess = true;
        this.theZoom = true;
      },
      actionProcessClose() {
        this.theZoom = false;
        setTimeout(() => {
          this.isFinishProcess = false;
        }, 1000)
      },
      actionWinningRecord() {
        this.actionStatus(3);
        this.getCloseSideColumn();
        this.isFinishRecord = true;
      },
      actionViewAlert() {
        this.isFinishRecord = false;
      },
      actionInstructionClose() {
        this.isFinishIntroduced = false;
        if (this.promptMessage !== '系统暂未获取到抽奖记录，请重试!' &&
          this.switchInstructions !== '活动说明' &&
          this.promptMessage !== '系统暂未获取到抽奖记录，请重试!' &&
          this.promptMessage !== '') {
          this.isFinishPrompt = true;
        }
      },
      actionUnwrap() {
        this.Unwrap = !this.Unwrap;
      },
      actionPromptDetermine() {
        this.isFinishPrompt = false;
        if (this.promptMessage === '活动未开始，请耐心等待!' ||
          this.promptMessage === '活动已结束，欢迎下次再来!') {
          this.$router.push({name: 'Discovery'});
        }
      },
      actionFov(type) {
        this.camera.fov = type;
        this.camera.updateProjectionMatrix();
        this.renderer.render(this.scene, this.camera);
      },
//      统一关闭测栏方法
      getCloseSideColumn() {
        this.Unwrap = false;
      },
      getScene() {
        this.scenario = document.getElementById('scenario');
        this.camera = new THREE.PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 1, 1100);
        this.controls = new THREE.DeviceOrientationControls(this.camera);
        this.scene = new THREE.Scene();
        let geometry = new THREE.SphereBufferGeometry(500, 60, 40);
        // invert the geometry on the x-axis so that all of the faces point inward
        geometry.scale(-1, 1, 1);
        //        更改这里
        let texture = new THREE.TextureLoader().load(
          'https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/vr-background12.jpg',
//          require('./image/vr-background8.jpg'),
          () => {
            setTimeout(() => {
              this.isFinishLoading = false;
              this.isFinishLoadBackground = true;
            }, 1000)
          });
        let material = new THREE.MeshBasicMaterial({
          map: texture
        });
        let mesh = new THREE.Mesh(geometry, material);
        this.cpGeometry = geometry;
        this.cpMaterial = material;
        this.cpTexture = texture;
        this.cpMesh = mesh;
        this.scene.add(mesh);
      },
      getPrizes() {
        this.renderer = new THREE.WebGLRenderer();
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.scenario.appendChild(this.renderer.domElement);
        window.addEventListener('resize', this.onWindowResize, false);
        this.raycaster = new THREE.Raycaster();
        this.mouse = new THREE.Vector2();
        document.querySelector('#scenario').addEventListener('click', this.onDocumentMouseMove, false);
      },
      initMethods() {
        this.cpCubeMaterials.forEach(data => {
          data.geometry.dispose();
          data.cubeMaterialArray.forEach(material => {
            material.dispose()
          });
        })
        this.cubeMaterialTexture.forEach(texture => {
          texture.dispose();
        })
        this.activityPrizeList.forEach(square => {
          this.scene.remove(square);
        })
        this.activityPrizeList = [];
        this.cpHelpMaterials.forEach(data => {
          data.geometry.dispose();
          data.cubeMaterialArray.forEach(material => {
            material.dispose()
          });
        })
        this.helpPositionList.forEach(texture => {
          texture.dispose();
        })
        this.tipTheArrowList.forEach(help => {
          this.scene.remove(help);
        })
        this.tipTheArrowList = [];
        this.helpBoxList = [];
        this.helpRotation = [];
      },
      creatCube() {
        /* eslint-disable */
        this.cpCubeMaterials = []
        this.cubeMaterialTexture = [];
        let square = null;
        let texture1 = new THREE.TextureLoader().load(
          'https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24treasure-chest2.png');
        this.cubeMaterialTexture.push(texture1);
        for (let i = 0; i < this.noNumber; i++) {
          let texture2 = new THREE.TextureLoader().load(
            'https://static.idoupiao.com/pdsImg/i-pufa-activity/i-pufa-24/24treasure-chest2.png');
          this.cubeMaterialTexture.push(texture2);
//            大小及形状
          let geometry = new THREE.CubeGeometry(0.2, 5, 5);
          let cubeMaterialArray = [];
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            map: texture1,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            map: texture2,
            transparent: true
          }));
          /* eslint-enable */
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          square = new THREE.Mesh(geometry, cubeMaterialArray);
          this.cpCubeMaterials.push({
            geometry,
            cubeMaterialArray
          });
          let r = this.randomMethods(50, 70);
          let s = this.randomMethods(0.6 * Math.PI, 0.8 * Math.PI);
          let c = this.randomMethods(0 * Math.PI, 2 * Math.PI);
          if (i === 0) {
            r = this.randomMethods(30, 40);
          }
          let squareBox = {
            x: r * Math.sin(s) * Math.sin(c),
            y: r * Math.cos(s),
            z: r * Math.sin(s) * Math.cos(c)
          };
          square.position.x = squareBox.x;
          square.position.y = squareBox.y;
          square.position.z = squareBox.z;
          let sigma = Math.acos(-squareBox.x / Math.sqrt(squareBox.x * squareBox.x + squareBox.z * squareBox.z));
          if (squareBox.x >= 0) {
            if (squareBox.z >= 0) {
              square.rotation.y = sigma;
            } else {
              square.rotation.y = -sigma;
            }
          } else {
            if (squareBox.z >= 0) {
              square.rotation.y = sigma;
            } else {
              square.rotation.y = -sigma;
            }
          }
          this.helpRotation.push(square.rotation.y);
          this.helpBoxList.push(squareBox);
          this.scene.add(square);
          this.cubesUuid[i] = square.uuid;
          this.activityPrizeList[i] = square;
        }
      },
      getHelp() {
        /* eslint-disable */
        this.cpHelpMaterials = [];
        this.helpPositionList = []
        let square = null;
        let texture1 = new THREE.TextureLoader().load(
          'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/help4.png');
        this.helpPositionList.push(texture1);
        for (var i = 0; i < this.upvoke; i++) {
          if (i >= this.helpBoxList.length) {
            break;
          }
          let texture2 = new THREE.TextureLoader().load(
            'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/help4.png');
          this.helpPositionList.push(texture2);
//            大小及形状
          let geometry = new THREE.CubeGeometry(0.2, 15, 5);
          let cubeMaterialArray = [];

          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            map: texture1,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            map: texture2,
            transparent: true
          }));
          /* eslint-enable */
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          cubeMaterialArray.push(new THREE.MeshBasicMaterial({
            color: 0xffffff,
            opacity: 0,
            transparent: true
          }));
          square = new THREE.Mesh(geometry, cubeMaterialArray);
          this.cpHelpMaterials.push({
            geometry,
            cubeMaterialArray
          });
          let squareBox = {
            x: this.helpBoxList[i].x,
            y: this.helpBoxList[i].y + 10,
            z: this.helpBoxList[i].z
          };
          square.position.x = squareBox.x;
          square.position.y = squareBox.y;
          square.position.z = squareBox.z;
          square.rotation.y = this.helpRotation[i]
          this.scene.add(square);
          this.helpsUuid[i] = square.uuid;
          this.tipTheArrowList[i] = square;
        }
      },
      randomMethods(n, m) {
        return Math.random() * (m - n) + n
      },
      onWindowResize() {
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
      },
      onDocumentMouseMove(event) {
        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
        if (this.clickJudge) {
          this.clickJudge = false;
          setTimeout(() => {
            this.clickJudge = true;
            this.judgeClickPrize();
          }, 200)
        }
        event.preventDefault();
      },
      judgeClickPrize() {
        this.intersects = this.raycaster.intersectObjects(this.scene.children);
        if (this.intersects.length > 0) {
          if (this.INTERSECTED !== this.intersects[0].object) {
            for (let i = 0; i < this.cubesUuid.length; i++) {
              if (this.cubesUuid[i] === this.intersects[0].object.uuid) {
//                判断是不是助力道具
                if (i < this.tipTheArrowList.length) {
                  for (let j = 0; j < this.tipTheArrowList.length; j++) {
                    if (i === j) {
                      this.whetherOrNotToHelp = 1;
                      break;
                    } else {
                      this.whetherOrNotToHelp = 0;
                    }
                  }
                } else {
                  this.whetherOrNotToHelp = 0;
                }
//                查询
                this.actionStatus(3);
                setTimeout(() => {
//                    开始抽奖
                  this.actionRobPath();
                  this.INTERSECTED = this.intersects[0].object;
                  this.INTERSECTED.currentHex = this.INTERSECTED.material[0].color.getHex();
                  for (let i = 0; i < this.INTERSECTED.material.length; i++) {
                    this.INTERSECTED.material[i].visible = false;
                  }
                  if (this.whetherOrNotToHelp) {
                    for (let x = 0; x < this.tipTheArrowList[i].material.length; x++) {
                      this.tipTheArrowList[i].material[x].visible = false;
                    }
                  }
                }, 200)
              }
            }
          }
        } else {
          if (this.INTERSECTED) this.INTERSECTED.material[0].color.set(this.INTERSECTED.currentHex);
          this.INTERSECTED = null;
        }
      },
      standardizationDeg(orientation) {
        return {
          x: (orientation.x + 360 * 100) % 360,
          y: (orientation.y + 360 * 100) % 360,
          z: (orientation.z + 360 * 100) % 360
        }
      },
      render() {
        window.requestAnimationFrame(this.render);
        if (!this.isFinishAnimate) {
          if (this.isFinishLoadBackground) {
            if (this.isCanStartAnimate) {
              this.animateImpulse.update();
            } else {
              this.controls.cpUpdate({position: ENTER_FROM_POSITION, orientation: ENTER_FROM_ORIENTATION});
            }
          }
        } else if (this.isChasing) {
          this.chaseScale += 0.05;
          let curOrientation = this.standardizationDeg(this.controls.getDeviceOrientationDeg());
          let startChaseOrientation = this.standardizationDeg(CHASE_START_ORIENTATION);
          this.chaseOrientation = {
            x: startChaseOrientation.x + (curOrientation.x - startChaseOrientation.x) * this.chaseScale,
            y: startChaseOrientation.y + (curOrientation.y - startChaseOrientation.y) * this.chaseScale,
            z: startChaseOrientation.z + (curOrientation.z - startChaseOrientation.z) * this.chaseScale
          }
          this.controls.cpUpdate({orientation: this.chaseOrientation});
          curOrientation = null;
          startChaseOrientation = null;
          if (this.chaseScale > 1) {
            this.isChasing = false;
          }
        } else {
          this.controls.cpUpdate();
        }
        this.raycaster.setFromCamera(this.mouse, this.camera);
        this.renderer.render(this.scene, this.camera);
      },
      getGamplification() {
        var s = {
          tsa: 0,
          tsb: 0,
          scale: 75,
          moScale: 75
        }
        document.addEventListener('touchstart', function (e) {
//        把时时的倍数记录一下
          s.scale = s.moScale;
          e = e || window.event;
          if (e.touches.length === 2) {
//          获取2对坐标
            var stax = e.touches[0].clientX;
            var stay = e.touches[0].clientY;
            var stbx = e.touches[1].clientX;
            var stby = e.touches[1].clientY;
            s.tsa = Math.sqrt((stax - stbx) * (stax - stbx) + (stay - stby) * (stay - stby));
          }
        }, false)
        document.addEventListener('touchmove', (e) => {
          e = e || window.event;
          if (e.touches.length === 2) {
            var endax = e.touches[0].clientX;
            var enday = e.touches[0].clientY;
            var endbx = e.touches[1].clientX;
            var endby = e.touches[1].clientY;
            s.tsb = Math.sqrt((endax - endbx) * (endax - endbx) + (enday - endby) * (enday - endby));
//          实时的倍数等于我的变化比例cheng以start时记录的倍数
            if (Math.floor(s.tsa / s.tsb * s.scale) > 110) {
              s.moScale = 110;
            } else if (Math.floor(s.tsa / s.tsb * s.scale) < 30) {
              s.moScale = 30;
            } else {
              s.moScale = Math.floor(s.tsa / s.tsb * s.scale);
            }
            this.actionFov(s.moScale);
          }
        }, false)
      },
      getBill() {
//        NetworkActivity.winningRecord(this.robType, this.robId).then((data) => {
//          let prizesList = data.map(_ => {
//            return {...JSON.parse(_)};
//          })
//          for (let i = 0; i < prizesList.length; i++) {
//            if (i % 3 === 0) {
//              this.prizeList.slownessPrizesList.push(prizesList[i]);
//            } else if (i % 3 === 1) {
//              this.prizeList.quickPrizesList.push(prizesList[i]);
//            } else if (i % 3 === 2) {
//              this.prizeList.slowPrizesList.push(prizesList[i]);
//            }
//          }
//        }, error => {
//          console.log(error)
//        })
      },
      getStarted() {
        this.getScene();
        this.actionStatus(1);
//        中奖名单
        this.getBill();
//        生成场景和奖品
        this.initMethods();
        this.getPrizes();
        this.render();
        this.getGamplification();
        this.generatePrize();
      },
      prizeInformation(prizeMap, robNum) {
        this.prizeMap = [];
        if (prizeMap) {
          for (let i in prizeMap) {
            console.log(i)
            let prizeMapList = {
              type: prizeMap[i].type,
              info: prizeMap[i].info
            };
            this.prizeMap.push(prizeMapList)
          }
//            判断后台是不是给值
          console.log(this.prizeMap)
          if (this.prizeMap.length === robNum) {
            if (this.prizeMap[this.prizeMap.length - 1].type === 1) {
              this.isFinishTicket = 1;
            } else if (this.prizeMap[this.prizeMap.length - 1].type === 2) {
              this.isFinishTicket = 2;
              this.movieTicketNumber = this.prizeMap[this.prizeMap.length - 1].info;
            } else {
              this.isFinishTicket = 0;
            }
          } else {
            this.isFinishTicket = 0;
          }
        }
      },
      helpfulTips(robNum, upvoke) {
        if (robNum === 3) {
          this.isFinishPrompt = true;
          this.promptMessage = '道具已全部开启，静待奖品发放！';
          return;
        }
        if (!upvoke) {
          this.isFinishPrompt = true;
          this.promptMessage = '您当前没有助力次数，请邀请好友来助力！';
        } else {
          this.isFinishPrompt = true;
          this.promptMessage = '助力成功，请根据箭头寻找道具！';
          this.noNumber = 3 - robNum;
          this.upvoke = upvoke;
          if (this.upvoke >= this.noNumber) {
            this.upvoke = this.noNumber;
          }
          this.initMethods();
          this.generatePrize();
        }
      },
//      世玲接口
      actionStatus: function (type) {
//        NetworkActivity.filmRobStatus(this.robType, this.robId).then((ret) => {
//          this.prizeInformation(ret.prizeMap, ret.robNum);
//          if (type === 4) {
//            this.helpfulTips(ret.robNum, ret.upvoke);
//          } else {
//            if (this.robJudge) {
//              this.robJudge = false;
//              this.noNumber = 3 - ret.robNum;
//              this.upvoke = ret.upvoke;
//              this.userId = ret.userId;
//              let helpPosition = window.location.href;
//              let thirdHelp = new RegExp('local');
//              let activityLocation = thirdHelp.test(helpPosition);
//              if (activityLocation) {
//                this.shareUrl = 'http://local.idoupiao.com:9060/i-pufa-film/index.html#/' +
//                  'thirdHelp?userId=' +
//                  this.userId + '&robId=' + this.robId + '&robType=' + this.robType + '&inType=' + this.inType;
//              } else {
//                this.shareUrl = 'https://spdbwx.idoupiao.com/i-pufa-film/index.html#/' +
//                  'thirdHelp?userId=' +
//                  this.userId + '&robId=' + this.robId + '&robType=' + this.robType + '&inType=' + this.inType;
//              }
//            活动玩法判断，用户一次都没有玩的时候提示
//              this.isFinishIntroduced = true;
//            }
//            this.encryptCardNo = ret.encryptCardNo;
//            this.random = ret.random;
//            if (ret.status === 0) {
//              if (type === 1) {
//                this.generatePrize();
//              }
//              this.promptMessage = ret.prizeInfo;
//              if (type === 1 && !window.sessionStorage.firstactivity) { // 页面自动加载
//              } else if (type !== 1) {
//                window.sessionStorage.firstactivity = '已抽奖';
//              }
//            } else if ((ret.status === 9)) {
//              this.isFinishPrompt = false;
//              this.msgText = ret.filmPrizeCount;
//              this.luckyNum = ret.luckyNum;
//              if (type === 1) {
//                this.generatePrize();
//              }
//              if (type !== 3 && type !== 1) {
//                this.isFinishWinning = true;
//              }
//            } else {
//              this.promptMessage = ret.prizeInfo;
//              if (!this.isFinishIntroduced) {
//                this.isFinishPrompt = true;
//              }
//            }
//          }
//        }, error => {
//          不让报错和活动玩法提示一起显示
//          this.isFinishIntroduced = false;
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      actionRobPath: function () {
//        NetworkActivity.filmRobPath(this.robType, this.robId).then((ret) => {
//          this.robPath = ret.robPath;
//          this.actionRob();
//        }, error => {
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      actionRob: function () {
//        NetworkActivity.filmRobAction(
//          this.robPath + '/' + this.random,
//          this.robType,
//          this.robId, this.random,
//          this.whetherOrNotToHelp
//        ).then((ret) => {
//          let val = this.fingerLastNum;
//          let lastImg = this.fingerLastNum;
//          this.fingerBig = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/hdimg-s' + lastImg + '.png';
//          this.fingType = true;
//          this.intervalid = setInterval(() => {
//            val--;
//            if (val === 0) {
//              clearInterval(this.intervalid);
//              this.fingerBig = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/hdimg-s' + lastImg + '.png';
//              this.fingType = false;
//              this.actionStatus(2);
//            } else {
//              lastImg = val;
//              this.fingerBig = 'https://static.idoupiao.com/pdsImg/i-pufa-third-active-v1.0/hdimg-s' + lastImg + '.png';
//            }
//          }, 1500)
//        }, error => {
//          this.isFinishPrompt = true;
//          if (error.message) {
//            this.promptMessage = error.message;
//          } else {
//            this.promptMessage = '系统正在开小差，请稍后再试！';
//          }
//        })
      },
      generatePrize() {
        this.creatCube();
        this.getHelp();
      }
    },
    mounted: function () {
//      测试使用
      this.animateImpulse = new AnimateImpulse([ENTER_FROM_POSITION, ENTER_FROM_ORIENTATION],
        [ENTER_TO_POSITION, ENTER_TO_ORIENTATION], PULSE_FREQUENCY_COUNT, (data) => {
          this.controls.cpUpdate({position: data[0], orientation: data[1]});
        }, () => {
          console.log('完成');
          this.isFinishAnimate = true;
          this.isChasing = true;
        });
      document.querySelector('.Time-rob-ticket').style.height = window.innerHeight + 'px';
      this.getStarted();
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .Time-rob-ticket {
    width: 7.5rem;
    height: 100%;
    min-height: 13rem;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    background: url(./image/box-background.jpg);
    background-size: 100%;
  }

  .loading-vr {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    .loading-text {
      width: 1.3rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 3;
    }
    @keyframes billsImg {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .loading-center-figure {
      width: 2.5rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: billsImg 0.5s infinite;
      animation-timing-function: linear;
      -webkit-animation: billsImg 0.5s infinite; /* Safari 和 Chrome */
      -webkit-animation-timing-function: linear;
    }
    .loading-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  }

  .rob-ticket-main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    #scenario {
      width: 100%;
      height: 100%;
    }
  }

  .rob-ticket-record {
    width: 100%;
    height: 4rem;
    color: #fff;
    text-align: center;
    position: fixed;
    top: 1.8rem;
    right: 0;
    pointer-events: none;
    marquee {
      height: 1rem;
      line-height: 1rem;
      .marquee-box {
        .marquee-content {
          padding: 0.1rem;
          border: 1px solid #fff;
          border-radius: 50px;
          font-size: 0.22rem;
          position: relative;
          top: 0;
          left: 0;
          margin-right: 7rem;
          span {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #000;
            opacity: 0.2;
            border-radius: 50px;
            border: 1px solid #000;
          }
        }
        .marquee-nbsp {
          width: 2rem;
        }
      }
    }
  }

  .side-column {
    width: 2rem;
    height: 4rem;
    position: fixed;
    right: -3rem;
    top: 5rem;
    background: $color-4;
    img {
      width: 1.36rem;
      position: absolute;
      transition: 1.2s all;
      top: 1.3rem;
      left: 2.5rem;
      opacity: 0;
    }
    .bomb {
      top: -0.3rem;
      left: -2.5rem;
      opacity: 1;
    }
    .edit {
      top: 0.5rem;
      left: -3.6rem;
      opacity: 1;
    }
    .process {
      top: 2.1rem;
      left: -3.6rem;
      opacity: 1;
    }
    .record {
      top: 3.3rem;
      left: -2.5rem;
      opacity: 1;
    }
    .round {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
    }
    .pf-img {
      width: 0.93rem;
      position: absolute;
      top: 1.2rem;
      left: -1.9rem;
      opacity: 1;
    }
  }

  .friends-help {
    width: 2.5rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    border-radius: 50%;
    position: fixed;
    left: 30%;
    bottom: 0.5rem;
    transform: translate(-50%, -50%);
  }

  .use-the-help {
    width: 2.5rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
    border-radius: 50%;
    position: fixed;
    left: 70%;
    bottom: 0.5rem;
    transform: translate(-50%, -50%);
  }

  .winning-popup-window {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .popup-window-background {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .winning-frame {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      /*animation: fadeInDown 1s 1 linear 0s;*/
      .winning-title {
        width: 3rem;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translate(-50%, 0);
      }
      .winning-content {
        .winning-img {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .winning-txt {
          width: 2rem;
          position: absolute;
          top: 1.3rem;
          left: 50%;
          transform: translate(-50%, 0);
          z-index: 1;
        }
        div {
          width: 3rem;
          position: relative;
          top: 2.8rem;
          left: 30%;
          transform: translate(0, -50%);
          z-index: 2;
          img {
            width: 1.2rem;
          }
          .movie-ticket {
            width: 0.8rem;
            position: relative;
            top: -0.15rem;
            left: 0.2rem;
            font-size: 0.4rem;
            color: #fff;
            z-index: 2;
          }
          .beans {
            position: relative;
            top: -0.15rem;
            left: 0.2rem;
            font-size: 0.4rem;
            color: #fff;
            z-index: 2;
          }
        }
        .prompt-not-winning {
          width: 3rem;
          position: relative;
          top: 2.8rem;
          left: 1.2rem;
          z-index: 2;
          img {
            width: 3rem;
          }
        }
      }
      .winning-button {
        width: 50%;
        position: absolute;
        top: 5rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }

  .prompt-information-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .prompt-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .prompt-backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      animation: mymove 1s 1;
      -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
      .prompt-backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .prompt-prompting {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 0.5rem;
        padding-top: 0.5rem;
      }
      .prompt-prizes {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 0.3rem;
        position: absolute;
        top: 1.5rem;
        left: 0;
        padding: 0.2rem;
      }
      .prompt-alert-button {
        width: 50%;
        position: absolute;
        top: 4.7rem;
        left: 0;
        right: 0;
        margin: auto;
      }
    }
  }

  .gameplay-is-introduced {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .introduce-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: black;
      z-index: 2;
      opacity: 0.5;
    }
    .introduce-backdrop {
      width: 5.5rem;
      height: 5.3rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 3;
      /*animation: fadeInDown 1s 1 linear 0s;*/
      .introduce-backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .introduce-prompting-img {
        width: 2.8rem;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
      }
      .introduce-close {
        width: 0.45rem;
        position: absolute;
        top: -0.2rem;
        right: -0.2rem;
      }
      .introduce-txt {
        width: 4.7rem;
        line-height: 0.5rem;
        position: absolute;
        top: 1.2rem;
        left: 50%;
        transform: translate(-50%, 0);
        color: #fff;
        font-size: 0.24rem;
        div {
          img {
            width: 4.2rem;
            position: absolute;
            top: 5.5rem;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        }
        span {
          color: #ffdd22;
        }
      }
    }
    .backdropImg {
      width: 6.5rem;
      height: 7.3rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 3;
      /*animation: fadeInDown 1s 1 linear 0s;*/
      .instruction-txt {
        width: 5.5rem;
        line-height: 0.5rem;
        position: absolute;
        top: 1.2rem;
        left: 50%;
        transform: translate(-50%, 0);
        color: #fff;
        font-size: 0.24rem;
      }
      .introduce-txt {
        width: 5.5rem;
        line-height: 0.5rem;
        position: absolute;
        top: 1.2rem;
        left: 50%;
        transform: translate(-50%, 0);
        color: #fff;
        font-size: 0.24rem;
      }
    }
  }

  .winning-record-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .record-background {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: black;
      opacity: 0.5;
      z-index: 1;
    }
    .record-backdrop {
      width: 70%;
      height: 50%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 2;
      /*animation: fadeInDown 1s 1 linear 0s;*/
      .record-backdrop-img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }
      .record-prompting-img {
        width: 2.8rem;
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 1;
      }
      .record-prompting {
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 0.38rem;
        padding-top: 0.5rem;
      }
      .record-prizes {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 1.3rem;
        left: 0;
        .record-no-prize {
          width: 2.4rem;
        }
      }
      .record-content-box {
        .record-content {
          width: 90%;
          height: 2.4rem;
          position: relative;
          top: 1.3rem;
          left: 50%;
          transform: translate(-50%, 0);
          text-align: left;
          font-size: 0.24rem;
          overflow: auto;
          .record-backdrop-img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
          }
          .record-prizes-content {
            div {
              width: 3rem;
              position: relative;
              top: 0.3rem;
              left: 1rem;
              z-index: 1;
              img {
                width: 1.2rem;
              }
              .record-msg-img {
                width: 0.8rem;
                position: relative;
                top: -0.15rem;
                left: 0.2rem;
                font-size: 0.4rem;
                color: #fff;
                z-index: 2;
              }
              .record-title {
                position: relative;
                top: -0.15rem;
                left: 0.2rem;
                font-size: 0.4rem;
                color: #fff;
                z-index: 1;
              }
            }
          }
        }
        .content-to-view {
          width: 95%;
          position: relative;
          top: 1.2rem;
          left: 50%;
          transform: translate(-50%, 0);
          text-align: center;
          font-size: 0.24rem;
          overflow: auto;
          z-index: 1;
          p {
            color: #fff;
          }
        }
      }
      .record-alert-button {
        width: 50%;
        position: absolute;
        top: 4rem;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }

  .shake-message {
    position: absolute;
    top: 9rem;
    left: 0;
    width: 0.95rem;
    height: 0.65rem;
    z-index: 4;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    div {
      width: 100%;
      height: 100%;
      position: absolute;
      background: #000;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
      border-top: 1px solid #9d97a4;
      border-bottom: 1px solid #9d97a4;
      border-right: 1px solid #9d97a4;
      opacity: 0.5;
      z-index: 1;
    }
    .shake-message-image {
      position: relative;
      top: 0;
      left: 0;
      z-index: 2;
      margin-left: 0.1rem;
      width: 0.6rem;
      animation: swing 1s infinite linear 3s;
    }
  }

  @keyframes mymove {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }

  @-webkit-keyframes mymove {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }

  .process-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0.7rem;
    left: 0;
    animation: mymove 1s 1;
    -webkit-animation: mymove 1s 1; /*Safari and Chrome*/
    z-index: 10;
    .process-that {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .understand {
      width: 3.2rem;
      position: absolute;
      bottom: 0.8rem;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  @keyframes mymove-close {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0)
    }
  }

  @-webkit-keyframes mymove-close {
    from {
      transform: scale(1)
    }
    to {
      transform: scale(0)
    }
  }

  .process-layer-close {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0.7rem;
    left: 0;
    animation: mymove-close 1s 1;
    -webkit-animation: mymove-close 1s 1; /*Safari and Chrome*/
    .process-that {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .understand {
      width: 3.2rem;
      position: absolute;
      bottom: 0.8rem;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }

  .third-activity-timing {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .third-timing-background {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: $color-black;
      opacity: 0.5;
    }
    .third-timing-img {
      width: 4.8rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .third-timing-time {
      width: 4rem;
      height: 4rem;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      img {
        width: 1rem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }

  .foot-title {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    position: fixed;
    left: 0;
    bottom: 0;
    color: #fff;
    font-size: 0.26rem;
    pointer-events: none;
    div {
      width: 100%;
      height: 0.8rem;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(#000000, transparent);
      opacity: 0.2;
      font-size: 0.24rem;
    }
  }
</style>
